<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>mycanvas</title>
</head>
<body>
<div>
    <h2>line canvas</h2>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #ccc;"></canvas>
</div>


<script>
    window.onload = function () {
        const arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 80, 40, 50, 30, 70, 80, 40, 77, 80, 70, 60, 50, 80];
        drawLine.minCurve(arr);
    }

    const drawLine = {};
    !function () {
        //求数组最大值
        Array.prototype.max = function () {
            let max = this[0];
            const len = this.length;
            for (let i = 1; i < len; i++) {
                if (this[i] > max) {
                    max = this[i];
                }
            }
            return max;
        }

        function draw(arr) {
            const width = 300, height = 200;
            const maxV = arr.max();
            //计算y轴增量
            const yStep = height / maxV;
            console.log(maxV);
            const domCan = document.getElementById("myCanvas");
            const context = domCan.getContext("2d");
            context.beginPath();
            context.lineWidth = 2;
            context.strokeStyle = "#395B73";
            //context.moveTo(0, 0);//开始画图的位置
            const x_space = width / (arr.length - 1);//水平点的间隙像素
            //context.lineTo(15, 60); x表示水平向右延伸，y表示垂直高度位置，从画板最左上角(0,0)开始计算坐标
            let xLen = 0;
            for (let i = 0; i < arr.length; i++) {
                const yValue = arr[i];//纵坐标值
                xLen += x_space;
                const yPont = height - yValue * yStep;
                if (i === 0) {
                    xLen = 0;
                }
                const m = xLen + "," + yPont;
                console.log(m);
                context.lineTo(xLen, yPont);
            }
            context.stroke();
            context.closePath();
        }

        drawLine.minCurve = draw;
    }();
</script>
</body>
</html>
